---
import { Button, Icon } from 'astro-pure/user'
import { cn } from 'astro-pure/utils'
import PageLayout from '@/layouts/BaseLayout.astro'
import { integ } from '@/site-config'

import DocsContents from './DocsContents.astro'

const meta = {
  title: 'Docs',
  description: 'Docs content documentation'
}
---

<PageLayout {meta}>
  <Button title='Back' href='/' variant='back' />
  <main class='mt-6 lg:mt-10'>
    <div id='content-header' class='animate'>
      <h1 class='mb-6 text-3xl font-medium'>Docs of Astro Theme Pure</h1>
    </div>

    <div id='content' class={cn('animate mt-8 max-w-none md:min-w-[45ch]', integ.typography.class)}>
      <h2 class='text-xl font-medium'>Theme documentation</h2>
      <DocsContents title={false} />

      <h2 class='text-xl font-medium'>Feedback</h2>
      <p>
        If you have any problems, you can check <a
          href='https://github.com/cworld1/astro-theme-pure/issues'
          target='_blank'>Github Issues</a
        > for community support.
      </p>
      <h2 class='text-xl font-medium'>News Describe (Alpha)</h2>
      <p>
        <a href='/docs/rss.xml' target='_blank'><Icon name='rss' /> </a>
      </p>
    </div>
  </main>
</PageLayout>
